<template>
	<view>
		<u-collapse :head-style="headStyle" event-type="close" :arrow="arrow" :accordion="accordion">

			<u-collapse-item index="1" title="差评选项设置">
				<view class="collapse-item">
					<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in negativeFeedbackList" :key="item.id"
					 @click="negativeFeedbackClick" @open="open" :options="options" :disabled="index == negativeFeedbackList.length - 1 ? true : false">
						<view v-if="index != negativeFeedbackList.length - 1" class="item u-border-bottom">
							<image mode="aspectFill" :src="item.images" />
							<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
							<view class="title-wrap">
								<text class="title u-line-2">{{ item.title }}</text>
							</view>
						</view>

						<view v-else class="item u-border-bottom" @click="changeModalTipShow()">
							<image mode="aspectFill" :src="item.images" />
							<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
							<view class="title-wrap">
								<text class="title u-line-2">{{ item.title }}</text>
							</view>
						</view>
					</u-swipe-action>
				</view>
			</u-collapse-item>

			<u-collapse-item index="2" title="排班同一时间段最大人数设置">
				<view class="collapse-item">
					<u-form :model="settingForm" ref="uForm">
						<u-form-item label="最大人数" prop="arrangementMaxPersonCount" label-width="230rpx" label-align="right" :label-style="formLabelStyle">
							<u-input v-model="settingForm.arrangementMaxPersonCount" :placeholder="maxCountPlaceHolder" />
							<u-button slot="right" type="primary" shape="square" size="mini" @click="updateSetting(1)">确认修改</u-button>
						</u-form-item>
					</u-form>
				</view>
			</u-collapse-item>
		</u-collapse>

		<u-collapse :head-style="headStyle" :body-style="insuranceStyle" event-type="close" :arrow="arrow" :accordion="accordion">
			<u-collapse-item index="3" title="预约以后保险通知文案设置">
				<view class="height: 3000rpx">
					<u-form :model="settingForm" ref="uForm" class="height: 3000rpx">
						<u-form-item label="保险文案" prop="insuranceNotification" class="height: 3000rpx" label-width="230rpx" label-align="right"
						 :label-style="formLabelStyle">
							<u-input v-model="settingForm.insuranceNotification" type="textarea" :height="insuranceHeight" auto-height="true" />
							<u-button slot="right" type="primary" shape="square" size="mini" @click="updateSetting(2)">确认修改</u-button>
						</u-form-item>
					</u-form>
				</view>
			</u-collapse-item>
		</u-collapse>

		<!-- <u-collapse :head-style="headStyle" :body-style="insuranceStyle" event-type="close" :arrow="arrow" :accordion="accordion">
			<u-collapse-item index="3" title="是否开启预约练车接送">
				<view class="height: 3000rpx">
					<u-form :model="settingForm" ref="uForm" class="height: 3000rpx">
						<u-form-item label="预约练车接送" prop="pickUpChanged" class="height: 3000rpx" label-width="230rpx" label-align="right"
						 :label-style="formLabelStyle">
							<u-switch v-model="settingForm.pickUpChanged" style="margin-left: 370rpx;" @change="change(settingForm.pickUpChanged)"></u-switch>
						</u-form-item>
					</u-form>
				</view>
			</u-collapse-item>
		</u-collapse> -->

		<view>
			<u-picker mode="selector" v-model="pickShow" :default-selector="[0]" :range="selector"></u-picker>
			<u-modal v-model="showModalTip" :title-style="{color: 'red'}" :title="modalTitle" @confirm="addNegative()"
			 show-cancel-button="true">
				<view class="slot-content">
					<u-field class="height: 50rpx" v-model="fieldContent" :label="lab" :placeholder="placeholder">
					</u-field>
				</view>
			</u-modal>
		</view>
		<u-modal v-model="deleteModalShow" content="确认要删除吗" @confirm="deleteModalConfirm" @cancel="deleteModalCancel"
		 show-cancel-button="true" mask-close-able="true"></u-modal>
		<u-toast ref="settingToast" />
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				insuranceHeight: 10,
				insuranceStyle: {
					height: '5000rpx'
				},
				formLabelStyle: {
					color: "#696969"
				},
				settingForm: {
					arrangementMaxPersonCount: '',
					insuranceNotification: '',
					pickUpChanged: false,
				},
				maxCountPlaceHolder: '',
				headStyle: {
					marginTop: '20rpx',
					marginLeft: '40rpx',
					fontSize: '35rpx',
				},
				toastTitle: '',
				toastType: '',
				deleteModalShow: false,
				index: '',
				placeholder: '请输入你要添加的差评内容',
				fieldContent: '',
				lab: "差评内容",
				modalTitle: "添加新的差评选项",
				showModalTip: false,
				pickShow: false,
				img: '/static/judge.png',
				inputShow: false,
				value: '',
				type: 'select',
				show: false,
				arrow: true,
				border: true,
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '未知'
					}
				],
				list: [{
						id: 1,
						title: '设置差评',
						images: '/static/setting.png',
						show: false
					},
					{
						id: 2,
						title: '保险通知',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false
					},
					{
						id: 3,
						title: '小程序版本',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
					}
				],
				options: [{
						text: '修改',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				selector: [],
				lowEvaluate: [],
				negativeFeedbackList: [],
				negativeFeedbackId: '',
				negativeFeedbackName: '',
				negativeFeedbackIndex: 0,
				setting: {
					id: '',
					settingKey: '',
					settingValue: ''
				},
				insuranceNotificationSetting: {
					id: '',
					settingKey: '',
					settingValue: ''
				},
				pickUpSetting: {
					id: '',
					settingKey: '',
					settingValue: ''
				},
				updateResult: false,
			}
		},

		created() {
			//获取差评选项设置数据
			api.getSettingValue(this.globalConst.NEGATIVE_COMMENT_KEY).then((res) => {
				for (var i = 0; i < res.data.length; i++) {
					this.negativeFeedbackList.push({
						title: res.data[i].settingValue,
						id: res.data[i].id,
						show: false
					});
				}
				this.negativeFeedbackList.push({
					title: "添加新的差评选项",
					id: 0,
					show: false
				});
			})

			//获取排版最大人数设置
			api.getSettingValue(this.globalConst.ARRANGEMENT_MAX_PERSON_COUNT).then((res) => {
				if (res.code === 0) {
					this.setting = res.data[0];
					this.maxCountPlaceHolder = "当前最大人数限制为: " + res.data[0].settingValue;
				}
			})

			//获取预约保险文案设置
			api.getSettingValue(this.globalConst.INSURANCE_NOTIFICATION).then((res) => {
				if (res.code === 0) {
					this.insuranceNotificationSetting = res.data[0];
					this.settingForm.insuranceNotification = res.data[0].settingValue;
				}
			})

			//获取预约练车接送设置
			api.getSettingValue(this.globalConst.PICK_UP).then((res) => {
				console.log(this.settingForm.pickUpChanged)
				if (res.code === 0) {
					this.settingForm.pickUpChanged = res.data[0].settingValue
					this.pickUpSetting.id = res.data[0].id
					this.pickUpSetting.settingKey = res.data[0].settingKey
					this.pickUpSetting.settingValue = res.data[0].settingValue
				}
			})
		},
		methods: {
			change(status) {
				this.settingForm.pickUpChanged = status
				console.log(this.settingForm.pickUpChanged)
				this.pickUpSetting.settingValue = status;
				api.updateSetting(this.pickUpSetting).then((res) => {
					if (res.code != 0) {
						this.toastTitle = "修改失败, 请稍后重试";
						this.toastType = "error";
						this.showSettingToast();
						callback(false)
					}
				})
			},
			isNum: function(value) {
				if (value == "") {
					return false;
				}
				if (!(/(^[1-9]\d*$)/.test(value))) {
					return false;
				}
				return true;
			},
			apiUpdateSetting: function(data, callback) {
				api.updateSetting(data).then((res) => {
					if (res.code === 0) {
						this.toastTitle = "修改成功";
						this.toastType = "success";
						this.showSettingToast();
						callback(true)
					} else {
						this.toastTitle = "修改失败, 请稍后重试";
						this.toastType = "error";
						this.showSettingToast();
						callback(false)
					}
				})
			},
			updateSetting(type) {
				var data = {
					id: '',
					settingKey: '',
					settingValue: ''
				};
				if (type === 1) {
					if (!this.isNum(this.settingForm.arrangementMaxPersonCount)) {
						this.toastTitle = "必须是数字且不能为空哦";
						this.toastType = "warning";
						this.showSettingToast();
						return;
					}
					this.setting.settingValue = this.settingForm.arrangementMaxPersonCount;
					data.id = this.setting.id;
					data.settingKey = this.setting.settingKey;
					data.settingValue = this.setting.settingValue;
					var that = this
					this.apiUpdateSetting(data, function(flag) {
						if (flag) {
							api.getSettingValue(that.globalConst.ARRANGEMENT_MAX_PERSON_COUNT).then((res) => {
								if (res.code === 0) {
									that.setting = res.data[0];
									that.settingForm.arrangementMaxPersonCount = '';
									that.maxCountPlaceHolder = "当前最大人数限制为: " + res.data[0].settingValue;
								}
							})
						}
					});

				} else if (type === 2) {
					if (this.settingForm.insuranceNotification == '' || this.settingForm.insuranceNotification.trim() == '') {
						this.toastTitle = "不能为空哦";
						this.toastType = "warning";
						this.showSettingToast();
						return;
					}
					if (this.settingForm.insuranceNotification.length > 255) {
						this.toastTitle = "内容不能超过255个字符哦";
						this.toastType = "warning";
						this.showSettingToast();
						return;
					}
					this.insuranceNotificationSetting.settingValue = this.settingForm.insuranceNotification;
					data.id = this.insuranceNotificationSetting.id;
					data.settingKey = this.insuranceNotificationSetting.settingKey;
					data.settingValue = this.insuranceNotificationSetting.settingValue;
					var that = this
					this.apiUpdateSetting(data, function(flag) {
						if (flag) {
							api.getSettingValue(that.globalConst.INSURANCE_NOTIFICATION).then((res) => {
								if (res.code === 0) {
									that.insuranceNotificationSetting = res.data[0];
									that.settingForm.insuranceNotification = res.data[0].settingValue;
								}
							})
						}
					});
				}
			},
			changeModalTipShow() {
				this.showModalTip = true;
			},
			showSettingToast() {
				this.$refs.settingToast.show({
					title: this.toastTitle,
					type: this.toastType,
					position: 'top',
					duration: 2000
				})
			},
			refreshSettingList() {
				api.getSettingValue(this.globalConst.NEGATIVE_COMMENT_KEY).then((res) => {
					this.negativeFeedbackList = [];
					for (var i = 0; i < res.data.length; i++) {
						this.negativeFeedbackList.push({
							title: res.data[i].settingValue,
							id: res.data[i].id,
							show: false
						});
					}
					this.negativeFeedbackList.push({
						title: "添加新的差评选项",
						id: 0,
						show: false
					});
				})
			},
			deleteModalConfirm() {
				api.deleteSetting(this.negativeFeedbackId).then((res) => {
					if (res.code === 0) {
						this.toastTitle = "删除成功";
						this.toastType = "success";
						this.showSettingToast();
						this.negativeFeedbackList[this.negativeFeedbackIndex].show = false;
						this.refreshSettingList();
					} else {
						this.toastTitle = "删除失败, 请稍后重试";
						this.toastType = "error";
						this.showSettingToast();
					}
				});
			},
			deleteModalCancel() {

			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			},
			testD: function() {
				this.show = true
				this.inputShow = true
			},
			addNegative: function() {
				if (this.fieldContent == '' || this.fieldContent.trim() == '') {
					this.toastTitle = "设置内容不能为空";
					this.toastType = "warning";
					this.showSettingToast();
					return;
				}
				if (this.fieldContent.length > 100) {
					this.toastTitle = "设置内容不能超过100个字符";
					this.toastType = "warning";
					this.showSettingToast();
					return;
				}
				var tar = {
					settingKey: this.globalConst.NEGATIVE_COMMENT_KEY,
					settingValue: this.fieldContent,
				}
				api.addSettingValueByKey(tar).then(res => {
					if (res.code === 0) {
						this.toastTitle = "添加成功";
						this.toastType = "success";
						this.showSettingToast();
						this.refreshSettingList();
					} else {
						this.toastTitle = "添加失败, 请稍后重试";
						this.toastType = "error";
						this.showSettingToast();
					}
					this.fieldContent = '';
				})
			},
			deleteEvluate: function() {
				this.$u.toast(`删除了`);
			},
			negativeFeedbackClick(index, index1) {
				this.negativeFeedbackIndex = index;
				this.negativeFeedbackId = this.negativeFeedbackList[index].id;
				this.negativeFeedbackName = this.negativeFeedbackList[index].title;
				this.setting.settingKey = this.globalConst.NEGATIVE_COMMENT_KEY;
				if (index1 == 0) {
					this.modalTitle = '输入要修改的内容';
					this.showModalTip = true
				} else {
					this.deleteModalShow = true
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.negativeFeedbackList[index].show = true;
				this.negativeFeedbackList.map((val, idx) => {
					if (index != idx) this.negativeFeedbackList[idx].show = false;
				})
			},
			runPicker: function() {
				this.pickShow = true
				api.getSettingByKey(this.globalConst.NEGATIVE_COMMENT_KEY).then(res => {
					console.log(res)
					let data = res.data
					var arr = []
					if (res.code === 0) {
						for (var i = 0; i < data.length; i++) {
							arr.push(data[i].settingValue)
						}
						this.selector = arr
						this.lowEvaluate = data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		padding: 20rpx;
	}

	image {
		width: 60rpx;
		flex: 0 0 60rpx;
		height: 60rpx;
		margin-right: 40rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
</style>